<template>
	<view class="login_content">
		<view class="login_logo" >
			<image src="../../static/login/login-logo.png" mode=""></image>
		</view>
		<view class="title">
			欢迎登录前程通
		</view>
		<view class="login_input">
			<van-form @submit="onSubmit">
				<van-field type="tel" left-icon="lock" v-model="phone" placeholder="请输入手机号"
					:rules="[{ required: true, message: '请输入手机号' }]" />
				<van-field v-model="sms" left-icon="user" center clearable placeholder="请输入短信验证码">
					<template #button>
						<span v-if="timeShow">{{countdown}}s</span>
						<span v-else @click="authCode">发送验证码</span>
					</template>
				</van-field>
				<view style="margin: 16px;">
					<van-button type="danger" size="large" native-type="submit" @click="loginBtn">登录</van-button>
				</view>
			</van-form>
		</view>
		<view class="other_methods">
			<view class="other_img"
				>
				<image src="../../static/login/other.png" mode=""></image>
			</view>
			<view class="methods">
				<view class="methods_list"
					>
					<image src="../../static/login/WeChat.png" mode=""></image>
				</view>
				<view class="methods_list"
					>
<image src="../../static/login/phone.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="footer">
			注册登录即表示同意<span style="color: red;">用户协议、隐私政策</span>
		</view>
		<view class="top_right" >
			<image src="../../static/login/leftimg.png" mode=""></image>
		</view>
		<view class="bottom_left">
			<image src="../../static/login/leftimg.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: '',
				sms: '',
				timeShow: false,
				countdown: 0,
				interval: null
			}
		},

		methods: {
			onSubmit() {
				console.log(11111)
				
			},
			loginBtn() {
				uni.switchTab({
					url: '/pages/table/home/index'
				});
				},
			authCode() {
				if (!this.timeShow) {
					this.countdown = 60; // 初始化倒计时为60秒  
					this.timeShow = true
					this.interval = setInterval(this.updateCountdown, 1000); // 每秒更新一次倒计时  
				}
			},
			updateCountdown() {
				if (this.countdown > 0) {
					this.countdown--;
				} else {
					clearInterval(this.interval); // 清除定时器  
					this.timeShow = false; // 停止倒计时  
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .van-button {
		border-radius: 8px;
	}

	.login_content {
		height: 100vh;
		width: 100vw;

		.top_right {
			position: absolute;
			right: 40rpx;
			top: 46rpx;
			height: 60rpx;
			width: 84rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}

		.bottom_left {
			position: absolute;
			left: 40rpx;
			bottom: 46rpx;
			height: 60rpx;
			width: 84rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}

		.login_logo {
			width: 96rpx;
			height: 96rpx;
			position: absolute;
			top: 150rpx;
			left: 50%;
			transform: translateX(-50%);
			image{
				width: 100%;
				height: 100%;
			}
		}

		.title {
			position: absolute;
			top: 290rpx;
			left: 50%;
			font-size: 40rpx;
			transform: translateX(-50%);
		}

		.login_input {
			height: 340rpx;
			width: 662rpx;
			padding: 20rpx;
			position: absolute;
			top: 390rpx;
			left: 50%;
			font-size: 40rpx;
			transform: translateX(-50%);
		}

		.other_methods {
			position: absolute;
			bottom: 170rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 496rpx;
			height: 130px;

			.other_img {
				width: 496rpx;
				height: 34rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}

			.methods {
				position: absolute;
				left: 50%;
				top: 72rpx;
				transform: translateX(-50%);
				width: 250rpx;
				display: flex;
				justify-content: space-around;

				.methods_list {
					width: 64rpx;
					height: 64rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.footer {
			font-size: 24rpx;
			width: 100%;
			text-align: center;
			position: absolute;
			bottom: 60rpx;
			left: 50%;
			transform: translateX(-50%);
		}
	}
</style>